<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "index",
  data() {
    return {
      tableData: [],
      startIndex: 0,
      size: 'small',
      drawer: false,
      index: 0,
      total: 0,
      totalPage: 0,
      orderVo: {
        order: {
        },
        pageNum: 1,
        pageSize: 5
      },
    }
  },
  mounted() {
    this.getData(1);
  },
  methods: {
    matchAgain(index) {
      console.log(index);
      console.log(this.tableData[index].orderNo);
      this.$axios.get("/order/matchAgain/"+this.tableData[index].orderNo).then(res => {
        if (res.data.code === 200) {
          this.getData();
        }
      })
    },
    getData(val) {
      this.orderVo.pageNum = val;
      this.$axios.post("/order/list", this.orderVo).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        this.totalPage = res.data.data.pages;
      })
    },
    orderMap(index) {
      this.drawer = true;
      this.index = index;
      let map = null;
      window._AMapSecurityConfig = {
        securityJsCode: 'a35977b0fe3c15cc97a39e8c0c684978',
      };
      AMapLoader.load({
        key: '1c522523b1358e4f0f15d2bec1071caa',  // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.Driving"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          /**
           * 初始化地图
           */

          map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });

          /**
           * 驾车路线规划
           */

          var driving = new AMap.Driving({
            map: map,
            // panel: "panel",
            // extensions: "base",
            policy: 0, //驾车路线规划策略，0是速度优先的策略
          });
          var points = [
            { keyword: this.tableData[index].senderReceiver.senderAddress },
            { keyword: this.tableData[index].senderReceiver.receiverAddress },
          ];
          driving.search(points, function (status, result) {
            if (status === 'complete') {
              console.log(result)
            } else {
              console.log('获取驾车数据失败：' + result)
            }
          });




          // var citySearch = new AMap.CitySearch()
          // citySearch.getLocalCity(function (status, result) {
          //   if (status === 'complete' && result.info === 'OK') {
          //     console.log(result)
          //     // 查询成功，result即为当前所在城市信息
          //   }
          // })




        })
        .catch((e) => {
          console.log(e);
        });
    },
    deleteOrder() {
      let orderNo = this.tableData[0].orderNo
      this.$axios.delete("/order/delete/" + orderNo).then(
        res => {
          this.getData();
        }
      )
    },
  },
}
</script>

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="序号">
      <template v-slot="scope">
        {{ scope.$index + 1 + startIndex+((this.orderVo.pageNum -1)*this.orderVo.pageSize) }} <!-- +1 是因为索引是从0开始的 -->
      </template>
    </el-table-column>
    <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
    <el-table-column prop="createdAt" label="创建时间" width="180">
    </el-table-column>
    <el-table-column prop="isRefrigerated" label="是否冷藏">
      <template v-slot="scope">
        <el-tag v-if="scope.row.isRefrigerated" type="success">是</el-tag>
        <el-tag v-if="scope.row.isRefrigerated === false" type="success">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="isUrgent" label="是否加急">
      <template v-slot="scope">
        <el-tag v-if="scope.row.isUrgent" type="success">是</el-tag>
        <el-tag v-if="scope.row.isUrgent === false" type="success">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="isInsurance" label="是否保价">
      <template v-slot="scope">
        <el-tag v-if="scope.row.isInsurance" type="success">是</el-tag>
        <el-tag v-if="scope.row.isInsurance === false" type="success">否</el-tag>
      </template>
    </el-table-column>
    <!--    <el-table-column-->
    <!--        prop="distance"-->
    <!--        label="运输距离(km)">-->
    <!--    </el-table-column>-->
    <!--    <el-table-column-->
    <!--        prop="bill.totalCost"-->
    <!--        label="应收费用(元)"></el-table-column>-->
    <el-table-column prop="status" label="订单状态">
      <template v-slot="scope">
        <el-tag v-if="scope.row.status === '处理中'" type="success">处理中</el-tag>
        <el-tag v-if="scope.row.status === '配送中'" type="primary">配送中</el-tag>
        <el-tag v-if="scope.row.status === '已完成'" type="info">已完成</el-tag>
        <el-tag v-if="scope.row.status === '匹配中'" type="warning">匹配中</el-tag>
        <el-tag v-if="scope.row.status === '匹配超时'" type="danger">匹配超时</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button v-if="scope.row.status == '匹配超时'" link type="primary" size="small" @click="deleteOrder">
          删除
        </el-button>
        <el-button link type="primary" size="small">编辑</el-button>
        <el-button v-if="scope.row.status !== '匹配中' && scope.row.status !== '匹配超时'" link type="primary" size="small"
          @click="orderMap(scope.$index)">详情</el-button>
        <el-button v-if="scope.row.status == '匹配超时'" link type="primary" size="small"
          @click="matchAgain(scope.$index)">重新发布</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer v-model="drawer" :with-header="false" size="80%">
    <div id="baseForm">
      <el-form :inline="true" :model="tableData[index].senderReceiver" class="demo-form-inline">
        <h2 style="padding-bottom: 5px">发货人收货人信息</h2>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发货人姓名">
              <el-input v-model="tableData[index].senderReceiver.senderName" placeholder="发货人姓名" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货人电话">
              <el-input v-model="tableData[index].senderReceiver.senderPhone" placeholder="发货人电话" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货地址">
              <el-input v-model="tableData[index].senderReceiver.senderAddress" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="收货人姓名">
              <el-input v-model="tableData[index].senderReceiver.receiverName" placeholder="收货人姓名" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人电话">
              <el-input v-model="tableData[index].senderReceiver.receiverPhone" placeholder="收货人电话" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货地址">
              <el-input v-model="tableData[index].senderReceiver.receiverAddress" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div id="baseForm">
      <el-form :inline="true" :model="tableData[index].bill" class="demo-form-inline">
        <h2 style="padding-bottom: 5px">费用信息</h2>
        <el-row>
          <el-col :span="8">
            <el-form-item label="加急费用(元)">
              <el-input v-model="tableData[index].bill.urgentFee" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="冷藏费用(元)">
              <el-input v-model="tableData[index].bill.refrigerationFee" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保险费用(元)">
              <el-input v-model="tableData[index].bill.insuranceFee" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="基础费用(元)">
              <el-input v-model="tableData[index].bill.baseCost" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总费用(元)">
              <el-input v-model="tableData[index].bill.totalCost" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div id="baseForm">
      <span>货物列表</span>
      <el-table :data="tableData[index].orderItems" style="width: 100%">
        <el-table-column prop="id" label="序号">
          <template v-slot="scope">
            {{ scope.$index + 1 + startIndex }} <!-- +1 是因为索引是从0开始的 -->
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="货物名"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column prop="weight" label="重量/吨"></el-table-column>
        <el-table-column prop="worth" label="价值/元"></el-table-column>

        <!--        <el-table-column fixed="right" label="操作" min-width="120">-->
        <!--          <template #default="scope">-->
        <!--            <el-button link type="primary" size="small" @click="deleteGoodsMsg(scope.$index, scope.row)">-->
        <!--              删除-->
        <!--            </el-button>-->
        <!--            <el-button link type="primary" size="small" @click="editGoodsMsg(scope.$index, scope.row)">编辑</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
    </div>
    <h2>运输路线</h2>
    <div id="container">
    </div>
  </el-drawer>
  <div class="pagination1">
    <el-pagination class="pagination" layout="prev, pager, next" :total="this.total" :page-count="this.totalPage"
      :current-page="this.orderVo.pageNum" :page-size="pageSize" @current-change="getData">
      >
    </el-pagination>
  </div>

</template>
<style>
.pagination1{
  width: 300px;
  margin: 70px auto 0;
}
.pagination{
  /* 居中 */
  width: 100%
}
#container {
  width: 100%;
  height: 500px;
}
</style>
